<template>
<!-- 定向包 -->
<a-card :border='false'>
  <div>
    <!-- 查询 -->
    <my-table-screen
      :queryParam="queryParam"
      :queryOptions="queryOptions"
      :queryData="queryData"
      @handleFilter="handleFilter"
    ></my-table-screen>
    <div>
      <!-- table -->
      <my-table
        ref="mytable"
        @rowSelection="v=>rowSelection(v)"
        :tableData="tableData"
        @tableHandleOut="tableHandleOut"
        @tableHandleIn="tableHandleIn"
      ></my-table>
        <!-- @switchChange="switchChange" -->
      <!-- 分页 -->
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParam.page"
        :limit.sync="queryParam.page_size"
        @pagination="getList"
      />
    </div>

    <!-- 弹窗 -->
    <a-modal
      :title="visibleTitle"
      :confirm-loading="confirmLoading"
      :visible="visible"
      width="60%"
      :maskClosable="false"
      @ok="submit"
      @cancel="close"
    >
      <package-add
        v-if="visible"
        ref="packageAdd"
        :formData="formData"
        :basisData="basisData"
        @subimtData="subimtData"
      ></package-add>
    </a-modal>
  </div>

</a-card>
</template>

<script>
import { getFixPackgeList,fixPackgeAdd,fixPackgeEdit,fixPackgeDetails,fixPackgeDelete } from "@/api/adv/fixPackage";
import packageAdd from "./packageAdd.vue";

export default {
  components:{ packageAdd },
  data () {
    return {
      // 查询
      queryParam:{  // 初始化数据
        page:1,
        page_size:10
      },
      total: 0,
      queryData:[
        { id:'keyWord',title:'关键词搜索',type:'input',placeholder:'支持ID或名称搜索' },
        { id:'created_at',title:'创建时间',type:'times' },
        { id:'landing_type',title:'定向包推广类型',type:'select',placeholder:'请选择定向包推广类型',options:'fixPackageType' },
        { id:'delivery_range',title:'广告投放范围',type:'select',placeholder:'请选择广告投放范围',options:'deliveryRange' },
        // { id:'account_id',title:'投放账户',type:'select',placeholder:'请选择投放账户',options:'putAccount' },
      ],
      queryOptions:{
        fixPackageType:this.$global.fixPackageType,
        deliveryRange:this.$global.deliveryRange,
        // putAccount:[],
      },
      // 表格
      tableData:{
        rowSelection:true,
        batchAction:[ 
          { title:'新建定向包',item:'primary',tableFnc:'handleAdd',icon:'plus' }
        ],
        tableDataSource:[],
        tableColumns:[
          { title:'ID',dataIndex:'id',align:'center' },
          { title:'定向包描述',dataIndex:'description',align:'center' },
          { title:'定向包名称',dataIndex:'name',align:'center' },
          { title:'定向包推广类型',dataIndex:'landing_type',align:'center',scopedSlots: {customRender:'filter'},
            formatter:(row)=>{
              let value
              this.$global.fixPackageType.forEach(ele => {
                ele.value == row.landing_type ? value = ele.label : ''
              });
              return value
            }
          },
          { title:'广告投放范围',dataIndex:'delivery_range',align:'center',scopedSlots: {customRender:'filter'},
            formatter:(row)=>{
              let value
              this.$global.deliveryRange.forEach(ele => {
                ele.value == row.delivery_range ? value = ele.label : ''
              });
              return value
            }
          },
          { title:'创建时间',dataIndex:'created_at',align:'center' },
          {
            title: '操作',align:'center',
            scopedSlots: {customRender: 'action'},
            tableBtn:[
              { title:'编辑',type:'primary',btnType:'handleEdit' },
              { 
                title:'删除',type:'danger',btnType:'handleDelete',
                popconfirm:true,popconfirmTitle:'删除数据不能恢复，确认删除吗？'
              },
            ]
          },
        ]
      },
      // 弹窗
      basisData:{},  // 定向包基本信息  （名称 描述 类型）
      formData:{},   // 定向包数据
      formBox:{
        rules: {
          account_id: [{ required:true, message:'请选择至少一个账号',trigger:'change' }],
        },
        directions:'同步时间与数量相关,确认后将自动同步,请耐心等待',
        formItem:[
          { type:'select',prop:'account_id',label:'广告组账户',placeholder:"请选择广告组账户",options:'putAccount',
            isMultiple:'multiple'
          },
        ]
      },
      formOptions:{   //select数据
        putAccount:[]
      },
      visibleTitle:'',
      confirmLoading:false,
      visible:false,
      // 选项
      checkData:[],
      packageID:'', // 当前定向包id （编辑）
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 初始化数据
    getList(){
      getFixPackgeList(this.queryParam).then((res)=>{
        if(res.code === 'SUCCESS'){
          this.tableData.tableDataSource = res.data.list
          this.total = res.data.page_info.total
        }
      })
    },
    // 表格头部按钮
    async tableHandleOut(tableFnc){
      // 新建定向包
      if( tableFnc === 'handleAdd' ){
        this.basisData = Object.assign({}, {})
        this.formData = Object.assign({}, {})
        this.visibleTitle = '新建定向包'
        this.visible = true
      }
    },
    // table表内列按钮
    async tableHandleIn(tableFnc,row){
      if( tableFnc === 'handleEdit'){
        this.packageID = row.id
        const res = await fixPackgeDetails(this.packageID)
        this.basisData = { name:res.data.name,description:res.data.description,landing_type:res.data.landing_type }
        this.formData = Object.assign({},res.data.audience)
        this.visibleTitle = '编辑定向包'
        this.visible = true
      }else if( tableFnc === 'handleDelete' ) {
        fixPackgeDelete(row.id).then((res)=>{
          this.$Tip(res)
          if( res.code === 'SUCCESS' ) this.getList()
        })
      }
    },
    // 确认
    submit(){
      this.$refs.packageAdd.handleSubmit()
    },
    // 提交
    async subimtData(formData,estimate){
      let res
      if(this.visibleTitle === '新建定向包'){
        res = await fixPackgeAdd(formData,estimate)
      }else if(this.visibleTitle === '编辑定向包'){
        let quest = { id:this.packageID,audience:formData,estimate:estimate }
        res = await fixPackgeEdit(quest)
      }
      if(res.code === 'SUCCESS') this.getList(),this.visible = false
    },
    // 关闭弹窗
    close(){
      this.visible = false
    },
    // 查询
    handleFilter(){
      this.queryParam.page = 1
      this.getList()
    },
    // table选项
    rowSelection(con) {
      console.info(con)
    },
  }
}
</script>

<style lang="less" scoped>

</style>
